<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>demo13</title>
    <script src="./lib/vue-2.4.0.js"></script>
    </head>
    <body>
        <div id="app">

            <div>
                <label>id
                    <input type="text" v-model="id"/>
                </label>

                <label>name:
                        <input type="text" v-model="name"/>
                    </label>
                   
                    <button @click="add">添加</button>
            </div>
            <!-- 在v-form循环的时候 key的属性 只可以用num获取str
            key在使用的时候 不需要使用 v-bind来绑定 制定key的值
            -->
            <p v-for="(item, index) in list" :key="item.id">
                <input type="checkbox" />
                id:{{item.id}}名字:{{item.name}}</p>
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                    id: '',
                    name: '',
                    list: [
                        { id: 1, name: '李四'},
                        { id: 2, name: '问问'},
                        { id: 3, name: '身上'},
                        { id: 4, name: '暗色'},
                        { id: 5, name: '方式'},
                    ]
                },
                methods:{
                    add() {
                        // 选择到list添加一条 id来自我增加的id name来自我增加的name
                        // 上面的id和name被我赋值空 接受到我input框的值 因为vue是双向绑定
                        this.list.unshift({id: this.id, name: this.name})
                    }
                }
            })
        </script>
    </body>
</html>